<template>
  <div class="job-intension-container">
    <TitleB
      :title="jobInfo.moduleTitle"
      iconName="el-icon-search"
      :backgroundColor="myThemeColor"
      @titleBValUpdate="onModuleTitleUpdate"
      @btnClick="onBtnClick"
    ></TitleB>
    <TitleC
      :attr1="jobInfo.intention.jobPostion"
      :attr2="jobInfo.intention.workCity"
      :attr3="jobInfo.intention.excepSalary"
      :attr4="jobInfo.intention.entryTime"
      @attrUpdate="onIntentionUpdate"
    ></TitleC>
  </div>
</template>

<script>
import TitleB from '@/components/base/TitleB.vue'
import TitleC from '@/components/base/TitleC.vue'
import { nanoid } from 'nanoid'
import {mapGetters} from 'vuex'

export default {
  data() {
    return {
      jobInfo: {
        moduleTitle: '求职意向',
        intention: {
        },
      },
      id: '',
    }
  },
  props: {
    jobIntensionProps: {
      type: Object,
      default: function () {
        return {
          moduleTitle: '求职意向',
          intention: {
            jobPostion: '前端开发',
            workCity: '杭州',
            entryTime: '暂定7月',
            excepSalary: '面议',
          },
        }
      },
    },
    moduleId: {
      type: String,
      default: nanoid(),
    },
  },
    computed:{
    ...mapGetters(['myThemeColor'])
  },
  created() {
    this.jobInfo = { ...this.jobIntensionProps }
    this.id = this.moduleId
  },
  methods: {
    onBtnClick(tag) {
      if (tag !== 'remove') {
        this.$message.warning('该模块不支持添加和删除记录!')
        return
      }
      this.$store.commit('removeModule', this.id)
    },
    // 修改模块标题
    onModuleTitleUpdate(newTitle) {
      this.jobInfo.moduleTitle = newTitle
      this.updateStore()
    },
    // 求职意向内容改变
    onIntentionUpdate({ index, newVal }) {
      switch (index) {
        case 1:
          this.jobInfo.intention.jobPostion = newVal
          this.updateStore()
          break
        case 2:
          this.jobInfo.intention.workCity = newVal
          this.updateStore()
          break
        case 3:
          this.jobInfo.intention.entryTime = newVal
          this.updateStore()
          break
        case 4:
          this.jobInfo.intention.excepSalary = newVal
          this.updateStore()
          break
      }
    },
    // 修改仓库数据
    updateStore() {
      const newData = { props: this.jobInfo, id: this.id }
      this.$store.commit('setModule', newData)
    },
  },
  components: {
    TitleB,
    TitleC,
  },
}
</script>

<style lang="less" scoped>
.job-intension-container {
  width: 100%;
  padding: 0 15px;
  margin-bottom: 5px;
}
</style>
